import React, { Component } from 'react';
// 1高阶组件-反向继承-条件渲染
class Demo extends Component {
  render() { 
    return <h1>Demo组件</h1>
  }
};
let LoadingDemo = withLoading(Demo);
class App extends Component {
  state = {
    loading: true
  }
  componentDidMount(){
    // 模拟网络请求效果
    setTimeout(()=>{
      this.setState({
        loading:false
      })
    },3000)
  }
  render() {
    return (
      <div>
        <h1>App组件</h1>
        <LoadingDemo loading={this.state.loading}></LoadingDemo>
      </div>
    );
  }
}
function withLoading(Cmp) {
  return class extends Cmp {
    render() {
      if (this.props.loading) {
        return <div>loading....</div>
      } else {
        return super.render();
      }
    }
  }
}

export default App;
